<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">

        <!-- 一般用法 =>指令值是字符串 -->
        <div :class="clsStr1"></div>
        <div :class="clsStr2"></div>

        <!--  指令值是数组  => 同时添加多个class名 -->
        <div :class="clsList"></div>

        <!--  指令值是对象  => 同时添加多个class名 (对象的键名就是要添加的class名,键值为true就添加  为false就不添加) -->
        <div :class="clsObj"></div>


        <!-- <div class="one"></div> -->
        <!-- 指令的值是一个javascript表达式 -->
        <!-- <div :class="one"></div> 此时:指令的值是一个变量 =>没有one这个变量 -->
        <!-- 
            v-bind:class指令的值 可以是字符串 数组 对象
            <div :class="'one'"></div>
            <div :class="['one','two','three']"></div>

            <div :class="{one:true,two:false,three: count % 1==0}"></div> -->

        <!-- 组合版(数组对象) -->
        <div :class="comb"></div>


        <!-- class属性可以和:class同时使用  => 可以理解为 :class 动态新增class名到class属性中(拼接) -->
        <div class="a b c" :class="comb"></div>

    </div>
</body>
<script>
    // 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

    // var obj = {
    //     a: 1,
    //     b: this.a + 1   // this指向window
    // }
    // console.log(obj);


    var vm = new Vue({
        el: "#app",
        data: {
            // 字符串
            clsStr1: "one",
            clsStr2: "one two three",

            // 数组
            clsList: ["one", "two", "three"],

            count: 1,
            // 对象
            clsObj: {
                one: true,
                two: false,
                // three:count % 2 == 0  语法有问题
            },
            comb: ["a", "b", "one", "two", { three: false, isActive: true }]

        },
        methods: {

        }

    })



</script>

</html>